<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-01-12 19:46:02
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 文件上传
-->
<template>
  <div class="avatar-uploader-box">
    <el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-file-list="false"
      accept=".pdf,.doc,.txt,.docx" :auto-upload="false" :on-change="beforeAvatarUpload">
      <el-button v-if="isShowUploadVideo" slot="trigger" class="video-btn" type="primary">选取文件</el-button>
    </el-upload>
  </div>
</template>

<script>
// import { createBanner } from '@/api/banner'
export default {
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 图片上传
      uploadUrl: '',
      isShowUploadVideo: true // 显示上传按钮
    }
  },
  watch: {
    url: {
      handler(nv, oldName) {
        if (nv) {
          this.videoPath = process.env.VUE_APP_FILE_API + nv
        } else {
          this.videoPath = ''
        }
      },
      immediate: true
    }

  },
  created() {
  },
  methods: {
    beforeAvatarUpload(event) {
      this.$emit('getFile', event)
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader-box {
  ::v-deep {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .video-btn {
      width: 200px;
      height: 86px;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .video-avatar {
      width: 280px;
      height: 180px;
    }

  }
}
</style>
